<template>
  <receipt-core
    @clear-open-json="clearOpenJson"
    @pose-edit-json="poseEditJson"
    @pose-submit-json="poseSubmitJson"
    @add-row-sub="addRowSub"
    @delete-row-sub="deleteRowSub"
    @json-format="jsonFormat"
    ref="idJsonItemsRefs"
    receipts-name="flow_chart_receipt"
    receipts-type="流程管理"
    receipts-no="011"
  >
    //弹窗的主表的插入的idJson信息
    <template #idJsonSlot> </template>
    //弹窗的子表的表格的插入的subJson信息
    <template #subJson>
      <el-table-column align="center" label="次序" min-width="160">
        <template #default="scope">
          <el-input v-model="subJsonItems[scope.$index].order"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="流程内容" min-width="380">
        <template #default="scope">
          <el-input v-model="subJsonItems[scope.$index].content"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="责任部门"
        width="200"
        min-width="160"
      >
        <template #default="scope">
          <el-input v-model="subJsonItems[scope.$index].department"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="角色" width="200" min-width="160">
        <template #default="scope">
          <el-input v-model="subJsonItems[scope.$index].userRole"></el-input>
        </template>
      </el-table-column>
    </template>
  </receipt-core>
</template>

<script lang="ts" setup>
import ReceiptCore from "@/components/receipt/ReceiptCore.vue";
import { ref } from "vue";
import { ReceiptsSub } from "@/models/ReceiptsSub";

//传递subJson内的内容到ReceiptsCore的Dialog内的Table内的插槽
const subJsonItems = ref([
  { order: null, content: null, department: null, userRole: null },
] as Array<unknown>);

//清空传递idJson内的内容ReceiptsCore的Dialog内的插槽内容
//清空传递subJson内的内容ReceiptsCore的Dialog内的Table内的插槽内容
//远程搜索的数据除外，不用清除，不然无法使用远程搜索
const clearOpenJson = () => {
  subJsonItems.value = [
    { order: null, content: null, department: null, userRole: null },
  ];
};

//子组件编辑时将某行idJson传递回本父组件并导入插槽内
//子组件编辑时将某行receiptsSub传递回本父组件，然后取出subJson导入插槽内
const poseEditJson = (idJson: unknown, receiptsSub?: Array<ReceiptsSub>) => {
  subJsonItems.value = [];
  if (!(receiptsSub?.length === undefined || receiptsSub?.length === 0)) {
    for (let i = 0; i < receiptsSub.length; i = i + 1) {
      subJsonItems.value.push({});
      subJsonItems.value[i] = receiptsSub[i].subJson;
    }
  }
};
//提交表单时将最新的ReceiptsSub传来处理，加入subJson后用callback返回
const poseSubmitJson = (
  callback: (value: Array<ReceiptsSub>) => void,
  no: string,
  receiptsSub: Array<ReceiptsSub>
) => {
  if (receiptsSub?.length === 0) {
    subJsonItems.value = [];
  } else {
    let i = 0;
    for (i; i < receiptsSub.length; i = i + 1) {
      receiptsSub[i].subJson = subJsonItems.value[i];
      receiptsSub[i].no = no;
    }
  }
  callback(receiptsSub);
};

const addRowSub = () => {
  subJsonItems.value.push({});
};
const deleteRowSub = (index: number) => {
  subJsonItems.value.splice(index, 1);
};
const jsonFormat = (
  data: Record<string, unknown>[][],
  callback: (value: Record<string, unknown>[]) => void
) => {
  let jsonList: Record<string, unknown>[] = [];
  for (let i = 0; i < data[0].length; i++) {
    // 存入字段名和excel表中的名称的映射，记得修改
    jsonList[i] = {};
    jsonList[i].no = data[0][i]["test1"];
    jsonList[i].name = data[0][i]["test2"];
    jsonList[i].description = data[0][i]["test3"];
    jsonList[i].departmentPhone = data[0][i]["test4"];
    jsonList[i].createUser = sessionStorage.getItem("token") as string;
    jsonList[i].createGmt = new Date();
  }
  callback(jsonList);
};
</script>

<style scoped></style>
